<template>
  <div class="personal-serve ">

	<swiperService></swiperService>
	
    <!-- 人才服务专题 -->
    <div class="shcool-box box">
			<div class="h2 flex-lect personal-title">
				<b class="flex1 font20">{{$t('common.personService.special')}}</b> 
				<router-link to="/serve_main?type=0" target = "_blank" class="h33">{{$t('common.personService.seemore')}}<i class="el-icon-arrow-right"></i></router-link>
			</div>
			<dl class="re dataList w11 tc">
				<dd class="cur fl dd" v-for="item in rencai" :key="item.id">
					<div class="flex-ct imgW">
						<img v-if="item.attachment && item.attachment.path" :src="imgUrl+item.attachment.path" alt="">
					</div>
					<div class="con cur">
					<div class="ntit font20">{{item.itemName}}</div>
					<div class="lin">——</div>
					<div class="np font12 h77">{{item.description}}</div>
					<router-link class="more h77" :to="'/serve_Detail?id='+item.id"  target = "_blank">{{$t('common.personService.learnMore')}}></router-link>
					</div>
				</dd>
				<dd class="dt"></dd>
			</dl>
    </div>
    
	<!-- 行业精英  名师讲堂 -->
	<div class="elite bgff">
		<div class="elite-box box flex">
			<div class="elite-left">
				<div class="h2 flex-lect personal-title">
					<b class="flex1 font20">{{$t('common.personService.elite')}}</b> 
					<router-link to="/serve_main?type=1" class="h33">{{$t('common.personService.seemore')}}<i class="el-icon-arrow-right"></i></router-link>
				</div>
				<div class="elite-left-box flex">
					<div class="elite-left-box-left">
						<router-link target = "_blank" :to="'/serve_Detail_elite?id='+eliteFirst.id" class="elite-left-box-left-img">
								<img v-if="eliteFirst.attachment && eliteFirst.attachment.path" :src="imgUrl+eliteFirst.attachment.path" alt=""/>
						</router-link>
						<p class="ntit">{{eliteFirst.informationTitle}}</p>
						<p v-html="eliteFirst.content" class="np jynp"></p>
					</div>
					<div class="elite-left-box-right">
						<el-scrollbar style="height: 100%;">
							<div class="elite-left-box-right-img" v-for="item in elite" @click="eliteSelect(item)"><img v-if="item.attachment!=null" :src="imgUrl+item.attachment.path" alt=""/></div>
						</el-scrollbar>
					</div>
				</div>
			</div>
			<div class="elite-right">
				<div class="h2 flex-lect personal-title">
					<b class="flex1 font20">{{$t('common.personService.teacher')}}</b> 
					<router-link to="/serve_main?type=2" class="h33">{{$t('common.personService.seemore')}}<i class="el-icon-arrow-right"></i></router-link>
				</div>
				<div class="elite-right-list">
					<router-link :to="'/serve_sign?id='+item.id" class="elite-right-item flexBetween" v-for="(item,index) in lecture" target="_blank">
						<span class="font14 h66 elite-right-item-name ntit">{{item.courseName}}</span>
						<span class="font14 h66">{{item.instructorResource.userName}}(讲师)</span>
						<span class="font14" :class="[item.courseStatus == 0 ? 'red1': item.courseStatus == 1 ? 'red0' : 'h99'] ">{{item.courseStatusTxt}}</span>
						<span class="font12 h66">{{item.beginTime}} 开课</span>
					</router-link>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 意见反馈 -->
    <div class="comapny-box clearfix idea">
		<div class="box">
			<div class="h2 flex-lect personal-title">
				<b class="flex1 font20">{{$t('common.personService.feedback')}}</b> 
			</div>
			<div class="idea-content clearfix">
				<div class="left">
				  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				    <el-form-item label-width="0" prop="communityType">
						<label style="margin-right: 14px;">{{$t('common.personService.communication')}}</label>
				      <el-radio-group v-model="ruleForm.communityType" @change="change">
				        <el-radio v-for="item in communityTypeList" :label="item.value">{{item.text}}</el-radio>
				      </el-radio-group>
				    </el-form-item>
				    <div class="clearfix">
				      <el-form-item label-width='0' prop="name" style="width:49%;float:left">
				        <el-input v-model="ruleForm.name" :placeholder="$t('common.company.name')" maxlength="10"></el-input>
				      </el-form-item>
				      <el-form-item label-width='0' prop="phone" style="width:49%;float:right">
				        <el-input v-model="ruleForm.phone" @input="getPhone" maxlength="11" :placeholder="$t('common.name.tel')"></el-input>
				      </el-form-item>
				    </div>
				    <el-form-item label-width='0' prop="companyName">
				      <el-input v-model="ruleForm.companyName" maxlength="30" :placeholder="$t('common.tips.title')"></el-input>
				    </el-form-item>
				    <el-form-item label-width='0' prop="content" class="textarea">
				      <el-input type="textarea" resize="none" :placeholder="$t('common.company.feedbackDetail')" v-model="ruleForm.content" maxlength="500"></el-input>
				    </el-form-item>
				    <!-- 注：每周最多可提交一次 -->
				    <div class="font12 h99">{{$t('news.note')}}</div>
				    <el-form-item>
				      <el-button type="primary" @click="submitForm('ruleForm')">{{$t('common.detail.submit')}}</el-button>
				    </el-form-item>
				  </el-form>
				</div>
				<div class="right">
					<span class="red1">{{$t('common.personService.remind')}}</span>
					<p class="h88">{{$t('common.personService.text1')}} <span class="h33">{{$t('common.personService.text2')}}:</span></p>
					<p class="h88">1、{{$t('common.personService.text3')}}</p>
					<p class="h88">2、{{$t('common.personService.text4')}}</p>
					<p class="h88">3、{{$t('common.personService.text5')}}</p>
				</div>
			</div>
      </div>
    </div>
  </div>
</template>
<script>
import swiperService from '@/components/personService.vue' //人才服务轮播图
import {ajax,reg,ajaxAdd,showToast,isLoginM} from '@/utils/js.js'
import {serviceItems,training,getNews,elite,styleList,newRequestSuggest} from '@/services/api.js'

export default {
	components:{
		swiperService
	},
  data() {
    return {
			curId:'',
			imgUrl:this.$store.state.imgUrl,	//图片前缀
			dataList:[],
			ruleForm: {
				name: '',  					//姓名
				phone: '',					//电话
				companyName: '',			//企业名称
				content:'',					// 详情描述
				communityType:''			//交流类型
			},
			
			lecture:[], 			//名师讲堂
			rencai:[], 			//人才服务专题
			elite:[],				//行业精英
			eliteFirst:[], 		//行业精英默认显示
			
			communityTypeList:[],//交流类型
    }
  },
  methods:{
		getPhone(){
			let phone = this.ruleForm.phone
			if(phone.length>0 && phone.substr(0,1) !=1){
				this.ruleForm.phone = ''
			}
		},
	// 交流类型改变时触发
	change(e){
		console.log(e)
	},
	  
	  
	// 切换行业精英
	eliteSelect(item){
		this.eliteFirst = item
	},
    content(){
			// 交流类型
			ajax(this,styleList,{lxjp:'communityType'},res=>{
			console.log("交流类型：",res)
			this.communityTypeList = res.data
			this.ruleForm.communityType = res.data[0].value
			},err=>{})
			
			// 名师讲堂
			var zmldata = {
				pageNo: 1,
				pageSize: 6
			}
			ajax(this,training,zmldata,res=>{
			console.log(res.data)
			this.lecture = res.data.records
			},err=>{
			console.log(err)
			})
			
			// 人才服务专题
			ajax(this,serviceItems,{serviceType:3,pageNo:1,pageSize:4},res=>{
			console.log(res.data)
			this.rencai =res.data
			},err=>{
			console.log(err)
			})
			
			// 行业精英
			ajax(this,elite,{pageNo:1,pageSize:10},res=>{
				console.log("行业精英：",res.data)
				if(res.data && res.data.records && res.data.records.length){
					this.elite = res.data.records
					this.eliteFirst = res.data.records[0]
				}
			},err=>{

			})
    },
	
    // 意见反馈
    submitForm(formName) {
			isLoginM(this,()=>{
        this.$refs[formName].validate((valid) => {
					if (valid) {
						var newData={
							"communityType": this.ruleForm.communityType,
							"description": this.ruleForm.content,
							"name": this.ruleForm.name,
							"phone": this.ruleForm.phone,
							"question": this.ruleForm.companyName,
							"terminal": 0
						}
						ajaxAdd(this,newRequestSuggest,newData,res=>{
							showToast(this,res.msg,1)
						},err=>{})
				
					} else {
						return false;
					}
				});
      })
      
    },
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
  },
  mounted(){
    this.content()
  },
  computed:{
    rules(){
      let data ={
          name: [
            { required: true, message: this.$t('common.form.input',[this.$t('common.company.name')]), trigger: ['blur', 'change'] },
            { min: 1, max: 100, message: this.$t('common.form.input',[this.$t('common.company.name')]), trigger: ['blur', 'change'] }
          ],
          phone: [
            { required: true, message: this.$t([this.$t('common.login.enterPhone')]), trigger: ['blur', 'change']  },
            { validator:reg.phone, trigger: ['blur', 'change'] }
          ],
          companyName: [
            { required: true, message: this.$t('common.form.input',[this.$t('common.tips.title')]), trigger: ['blur', 'change'] },
          ],
          content: [
            { required: true, message:this.$t('common.form.input',[this.$t('common.company.feedbackDetail')]) , trigger: ['blur', 'change']}
          ]
        }
        return data
    }	
  },
  watch:{
    '$i18n.locale'(){
      this.content()
    },
  },
}
</script>
<style lang="scss">
.personal-serve{
	// .ny-ban{background-color: #0F54BC;}
	.banner{
	  img{display: block;}
	  .el-carousel--button{
	    width:12px;
	    height:12px;
	    background:rgba(255,255,255,1);
	    border-radius:50%;
	    opacity: 1;
	  }
	  .el-carousel--indicator.is-active button{
	    background-color: #0F54BC;
	  }
	}
	.jynp *{line-height:20px !important; font-size:12px !important;}
	.jynp{max-height:40px !important; }
	.banner .link{height: 450px;display: block;width: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
	.bannerdot {width: 100%;bottom:10px;left: 0;z-index: 999;}
	.bannerdot .swiper-pagination-bullet{width:12px;height:12px;background-color: #fff;opacity: 1;margin:0 8px;}
	.bannerdot .swiper-pagination-bullet-active{background-color: #0F54BC;}
	.dataList{
		width: 110%;
		
		.dd{
		  width:290px;background-color: #fff; margin-right:20px;
		  .imgW{width:100%;height: 160px; display:flex; align-items: center; justify-content: center;
			img{width:94px;height:94px;object-fit: cover;}
		  }
		  .more{width:130px;line-height: 38px;margin:15px auto;border: 1px solid #ededed;display: block;}
		  .con{padding:16px;}
		}
		.dd:hover{
			box-shadow:0px 3px 6px rgba(0,0,0,0.16);
		  .con{
			background-color: #0F54BC;
		  *{color: #fff !important;}
		  }
		  .more{border-color: #fff;}
		}
		.np{
			height: 32px;
		}
	}
	.personal-title{
	  height: 96px;
		b{
		  padding-left: 10px;
		  position: relative;
		}
		b::before{
		  content:"";
		  position: absolute;
		  width: 2px;
		  height: 18px;
		  background-color: #0F54BC;
		  left: 0;
		  top: 50%;
		  transform: translateY(-50%);
	  }
		a:hover{
			color: #0F54BC !important;
			// font-weight: bold;
		}
	}
	.shcool-box{
		padding-bottom: 56px;
		dl{width: 100%;display: flex;}
	}
	.elite{
		padding: 15px 0;
		.elite-box{
			justify-content: space-between;
		}
		.elite-left{
			width: 506px;
			.personal-title{
				height: auto;
				border-bottom: 1px solid #ddd;
				padding: 16px 0;
			}
			.elite-left-box{
				padding: 20px 0;
				justify-content: space-between;
				.elite-left-box-left{
					overflow: hidden;
					width: 375px;
					height: auto;
					.elite-left-box-left-img{
						box-sizing: border-box;
						width: 100%;
						height: 272px;
						display: block;
						overflow: hidden;
						border: 1px solid #ccc;
						img{width: 100%;height: 100%;object-fit: cover;}
					}
					>p:nth-of-type(1){margin-top: 14px;font-size: 14px;color: #333;}
					>p:nth-of-type(2){font-size: 12px;color: #666;margin-top: 6px;}
				}
				.elite-left-box-right{
					width: 120px;
					height: 272px;
					.elite-left-box-right-img{
						width: 100%;
						height: 81px;
						border: 1px solid #ccc;
						margin-bottom: 14px;
						cursor: pointer;
						overflow: hidden;
						img{width: 100%;height: 100%;object-fit: cover;}
					}
					.elite-left-box-right-img:nth-last-of-type(1){
						margin-bottom: 0;
					}
					.el-scrollbar__wrap{
					  overflow-x: hidden;
					}
					.el-scrollbar__bar.is-vertical{right: 0;}
				}
			}
		}
		.elite-right{
			width: 623px;
			.personal-title{
				height: auto;
				border-bottom: 1px solid #ddd;
				padding: 16px 0;
			}
			.elite-right-item{
				padding: 19px 0 14px;
				border-bottom: 1px solid #DDDDDD;
				span{
					flex: 1;
				}
				span:nth-last-of-type(1){
					white-space: nowrap;
					text-align: right;	
				}
			}
			.elite-right-item-name{width:240px ;margin-right:20px;flex:none !important;}
			.elite-right-item::before{
				content: '';
				border-left:5px solid #0F54BC;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
				width: 0px;
				height:0px;
				margin-right:5px;
			}
			.elite-right-item:hover{
				.elite-right-item-name{
					cursor: pointer;
					text-decoration: underline;
					color: #0F54BC !important;
				}
				
			}
		}
	}
	.idea{
		.personal-title{
			height: auto;
			padding: 33px 0 15px;
		}
		.idea-content{
			justify-content: space-between;
		}
		.left{
			width: 610px;
			float: left;
		}
		.right{
			float: right;
			width: 565px;
			min-height: 240px;
			border: 1px solid #E5E5E5;
			background-color: #fff;
			margin-top: 50px;
			padding: 20px;
			border-radius:2px;
			p{
				margin-top: 14px;
				font-size: 12px;
				line-height: 20px;
			}
		}
		.el-input--small .el-input__inner{
			height: 44px;
		}
		.el-textarea__inner{
			height: 116px;
		}
		.el-form-item__content{
			margin-left: 0 !important;
		}
		.el-button--small{
			background-color: #0F54BC;
			border-color: #0F54BC;
			width: 103px;
			margin-top: 15px;
		}
	}
}
  
</style>